<template>
  <view class="container">
    <view class="icon-container">
      <u-icon name="checkmark-circle-fill" size="60" color="#70B603"></u-icon>
    </view>
    <view class="title">
      <text class="title-text">预约成功！</text>
    </view>
    <view class="button-container" @click="handleClick">
      <u-button>查看详情</u-button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      workOrderId: ''
    };
  },
  onLoad(options) {
    if (options.workOrderId){
      this.workOrderId = options.workOrderId
    }
  },
  methods: {
    handleClick() {
      this.$tab.redirectTo('./detail?workOrderId='+this.workOrderId)
    }
  }
}
</script>

<style lang="scss">
.container {
  padding: 20rpx 30rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.icon-container {
  margin-top: 50px;
  margin-bottom: 20px;
}

.title {
  text-align: center;
}

.title-text {
  font-size: 28rpx;
  color: #333333;
  margin-bottom: 10px;
}

.button-container {
  width: 100%;
  margin-top: 50rpx;
}
</style>
